<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/templates/TemplateBasic.xhtml">
	
	
	<ui:define name="content">


            
                <h:form id="form"> 
                	<p:growl id="msgs" />
                	 <p:panel header="Crear un nuevo contacto" >
                    <h:panelGrid columns="2" id="grid">
                        <h:outputLabel value="Nombre:"/>
                        <h:inputText value="#{contactoBean.contacto.nombre}" required="true" requiredMessage="Campo [nombre] es Obligatorio!" size="30"/>
                        <h:outputLabel value="Msn:"/>
                        <h:inputText value="#{contactoBean.contacto.msn}"  size="30"/>
                        <h:outputLabel value="Correo1:"/>
                        <h:inputText value="#{contactoBean.contacto.correo1}" required="true" requiredMessage="Campo [Correo1] es Obligatorio!" size="30"/>
                        <h:outputLabel value="Correo2:"/>
                        <h:inputText value="#{contactoBean.contacto.correo2}" required="true" requiredMessage="Campo [Correo2] es Obligatorio!" size="30"/>
                        <h:outputLabel value="Correo3:"/>
                        <h:inputText value="#{contactoBean.contacto.correo3}" size="30"/>
                        <h:outputLabel value="Tel1:"/>
                        <h:inputText value="#{contactoBean.contacto.tel1}" required="true" requiredMessage="Campo [Tel1] es Obligatorio!" size="30"/>
                        <h:outputLabel value="Tel2:"/>
                        <h:inputText value="#{contactoBean.contacto.tel2}" required="true" requiredMessage="Campo [Tel2] es Obligatorio!" size="30"/>
                         <h:outputLabel value="Tel3:"/>
                         <h:inputText value="#{contactoBean.contacto.tel3}" required="true" requiredMessage="Campo [Tel3] es Obligatorio!" size="30"/>
                        <p:commandButton value="Reset" type="reset"/>  
            <p:commandButton value="Add" update="contactoList msgs @parent"  
                            action="#{contactoBean.reinit}" >  
                <p:collector value="#{contactoBean.contacto}"   
                            addTo="#{contactoBean.contactoList}" />  
            </p:commandButton>  
        </h:panelGrid>  
    </p:panel>  
                    <p:ajaxStatus style="width:16px;height:16px;">  
        <f:facet name="start">  
            <h:graphicImage value="../design/ajaxloading.gif" />  
        </f:facet>  
          
        <f:facet name="complete">  
            <h:outputText value="" />  
        </f:facet>  
    </p:ajaxStatus>  
         
			
<p:outputPanel id="contactoList" />  
        <p:dataTable value="#{contactoBean.contactoList}" var="contacto">  
  <f:facet name="header">  
             Lista de Contactos 
        </f:facet>  
<p:column headerText="Nombre" style="width:150px"> 
   <p:cellEditor>  
   <f:facet name="output">  
                        <h:outputText value="#{contacto.nombre}" />  
                        </f:facet>  
                <f:facet name="input"> 
                <h:inputText value="#{contacto.nombre}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>
                    </p:column> 
               
<p:column headerText="Correo1" style="width:150px"> 
<p:cellEditor>  
                <f:facet name="output">   
                        <h:outputText value="#{contacto.correo1}" />  
     					 </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.correo1}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
                   
<p:column headerText="Correo2" style="width:150px">  
<p:cellEditor>  
                <f:facet name="output"> 
                        <h:outputText value="#{contacto.correo2}" />  
                        </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.correo2}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
                    
                    </p:column>  
<p:column headerText="Correo3" style="width:150px"> 
<p:cellEditor>  
                <f:facet name="output"> 
                        <h:outputText value="#{contacto.correo3}" /> 
                        </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.correo3}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>                
                    </p:column>  
<p:column headerText="MSN" style="width:150px">
<p:cellEditor>  
                <f:facet name="output">   
                        <h:outputText value="#{contacto.msn}" />  
                    </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.msn}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>   
                    </p:column>  
<p:column headerText="Tel 1" style="width:150px"> 
<p:cellEditor>  
                <f:facet name="output">    
                        <h:outputText value="#{contacto.tel1}" />  
                        </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.tel1}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>   
                    </p:column>  
<p:column headerText="Tel 2" style="width:150px"> 
<p:cellEditor>  
                <f:facet name="output"> 
                        <h:outputText value="#{contacto.tel2}" />  
                        </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.tel2}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
                    </p:column>  
<p:column headerText="Tel 3" style="width:150px"> 
<p:cellEditor>  
                <f:facet name="output">  
                        <h:outputText value="#{contacto.tel3}" />  
                     </f:facet>  
                <f:facet name="input">  
                    <h:inputText value="#{contacto.tel3}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor> 
            <h:commandLink value="Remove" update="form:contactoList" process="@this">  
                    <p:collector value="#{contacto}"  
                                 removeFrom="#{contactoBean.contactoList}" />  
                </h:commandLink>  
                    </p:column>  
  
                </p:dataTable>  
             
    
   

   
                </h:form>
           
        
    </ui:define>
</ui:composition>
